<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="index-box">
    <div class="contetn_left">
      <ItemWrap class="contetn_left-top contetn_lr-item" title="各年度室藏量">
        <LeftTop ref="LeftTopRef" />
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="门类数据量分布">
        <LeftCenter ref="LeftCenterRef" />
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="各保管期限量">
        <LeftBottom ref="LeftBottomRef" />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" ref="CenterMapRef" />
      <ItemWrap class="contetn_center-bottom" title="安装计划">
        <CenterBottom ref="CenterBottomRef" />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="系统年度季度走势">
        <RightTop ref="RightTopRef" />
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="活跃用户(TOP8)" style="padding: 0 10px 16px 10px">
        <RightCenter ref="RightCenterRef" />
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="本周/本日新增 ">
        <RightBottom ref="RightBottomRef" />
      </ItemWrap>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import ItemWrap from "@/components/ItemWrap/index.vue";
import LeftTop from "./LeftTop/index.vue";
import LeftCenter from "./LeftCenter/index.vue";
import CenterMap from "./CenterMap/index.vue";
import LeftBottom from "./LeftBottom/index.vue";
import CenterBottom from "./CenterBottom/index.vue";
import RightTop from "./RightTop/index.vue";
import RightCenter from "./RightCenter/index.vue";
import RightBottom from "./RightBottom/index.vue";

// 声明echarts实例
interface ChartProps {
  [key: string]: ECharts | null;
}
const dataScreen: ChartProps = {
  LeftTop: null,
  LeftCenter: null,
  LeftBottom: null,
  CenterBottom: null,
  RightTop: null,
  RightCenter: null,
  RightBottom: null,
  CenterMap: null
};
// 获取子组件的ref
interface ChartExpose {
  initChart: (params: any) => ECharts;
}
const LeftTopRef = ref<ChartExpose>();
const LeftCenterRef = ref<ChartExpose>();
const LeftBottomRef = ref<ChartExpose>();
const CenterBottomRef = ref<ChartExpose>();
const RightTopRef = ref<ChartExpose>();
const RightCenterRef = ref<ChartExpose>();
const RightBottomRef = ref<ChartExpose>();
const CenterMapRef = ref<ChartExpose>();

// 初始化 charts参数
const LeftTopData = ref([
  {
    year: 2018,
    value: 100
  },
  {
    year: 2019,
    value: 50
  },
  {
    year: 2020,
    value: 18
  },
  {
    year: 2021,
    value: 653
  },
  {
    year: 2022,
    value: 1082
  },
  {
    year: 2023,
    value: 158
  },
  {
    year: 2024,
    value: 300
  }
]);
const LeftCenterData = ref([]);
const CenterBottomData = ref({
  barData: [
    77, 38, 58, 36, 92, 54, 98, 42, 63, 69, 34, 79, 54, 14, 91, 37, 92, 67, 91, 56, 47, 76, 85, 80, 52, 12, 69, 16, 87, 59
  ],
  category: [
    "百色市",
    "承德市",
    "东营市",
    "澳门半岛",
    "海外",
    "玉树藏族自治州",
    "萍乡市",
    "黄山市",
    "延安市",
    "阿坝藏族羌族自治州",
    "玉树藏族自治州",
    "金昌市",
    "四平市",
    "扬州市",
    "吉安市",
    "重庆市",
    "九龙",
    "石嘴山市",
    "三明市",
    "巴彦淖尔市",
    "上饶市",
    "伊春市",
    "宿迁市",
    "丹东市",
    "南昌市",
    "巴彦淖尔市",
    "柳州市",
    "益阳市",
    "巴中市",
    "北京市"
  ],
  lineData: [
    129, 72, 153, 115, 159, 63, 163, 50, 88, 116, 102, 144, 60, 28, 151, 95, 183, 82, 149, 155, 112, 110, 181, 148, 118, 44, 159,
    58, 92, 92
  ],
  rateData: [
    "60",
    "53",
    "38",
    "31",
    "58",
    "86",
    "60",
    "84",
    "72",
    "59",
    "33",
    "55",
    "90",
    "50",
    "60",
    "39",
    "50",
    "82",
    "61",
    "36",
    "42",
    "69",
    "47",
    "54",
    "44",
    "27",
    "43",
    "28",
    "95",
    "64"
  ]
});

// 初始化 echarts
const initCharts = (): void => {
  dataScreen.LeftTop = LeftTopRef.value?.initChart(LeftTopData.value) as ECharts;
  dataScreen.LeftCenter = LeftCenterRef.value?.initChart() as ECharts;
  dataScreen.LeftBottom = LeftBottomRef.value?.initChart() as ECharts;
  dataScreen.RightTop = RightTopRef.value?.initChart() as ECharts;
  dataScreen.CenterBottomRef = CenterBottomRef.value?.initChart(CenterBottomData.value) as ECharts;
  dataScreen.RightBottom = RightBottomRef.value?.initChart(LeftTopData.value) as ECharts;
  dataScreen.CenterMap = CenterMapRef.value?.initChart() as ECharts;
};
onMounted(() => {
  initCharts();
});
</script>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 540px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 310px;
}
</style>
